<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" @close="dialogVisible=false">
    <el-form ref="forbidForm" :rules="rules" :model="formData" label-width="80px">
      <el-form-item label="封禁类型" prop="operationType">
        <el-select v-model="formData.operationType">
          <el-option :value="'0'" label="封号" />
          <el-option :value="'2'" label="禁聊" />
        </el-select>
      </el-form-item>
      <el-checkbox-group v-if="formData.operationType==='2'" v-model="formData.bannedType">
        <el-checkbox label="BANNED_ANCHOR_TAB">不在缘分内显示</el-checkbox>
        <el-checkbox label="BANNED_UNASSIGNED_GREETING">不分配打招呼</el-checkbox>
        <el-checkbox label="BANNED_GREET_PEOPLE_NEARBY">无法给附近的人打招呼</el-checkbox>
        <el-checkbox label="BANNED_RANDOM_CHAT_ASSIGNED">不随机分配文字、语音、视频</el-checkbox>
        <el-checkbox label="BANNED_SEND_ACTION">无法发送动态</el-checkbox>
        <el-checkbox label="BANNED_RECOVER_DYNAMIC">无法回复动态</el-checkbox>
      </el-checkbox-group>
      <el-form-item label="账户：" prop="userIds">
        <el-input
          v-model="formData.userIds"
          :disabled="!!userIds"
          type="textarea"
          placeholder="填写用户ID，一行一个"
        />
      </el-form-item>
      <el-form-item label="时间：" prop="hours">
        <el-radio-group v-model="formData.hours">
          <el-radio :label="1">1小时</el-radio>
          <el-radio :label="24">1天</el-radio>
          <el-radio :label="72">3天</el-radio>
          <el-radio :label="120">5天</el-radio>
          <el-radio :label="168">7天</el-radio>
          <el-radio :label="360">15天</el-radio>
          <el-radio :label="720">30天</el-radio>
          <el-radio :label="72000">永久</el-radio>
          <el-input v-model="formData.hours" placeholder="自定义(小时)" size="mini" min="200" clearable>
            <template>小时</template>
          </el-input>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="原因：" prop="reason">
        <el-autocomplete v-model="formData.reason" :fetch-suggestions="querySearch" size="large" type="textarea" placeholder="请输入封号原因" style="width: 80%;" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="onForbid">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { xhrForbidAccount } from '@/api/account'
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      userIds: {
        type: String,
        default: null
      },
      forbidType: {
        type: String,
        default: '2'
      },
      bannedType: {
        type: Array,
        default: () => ([])
      },
      reason: {
        type: String,
        default: ''
      },
      hours: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        formData: {
          hours: this.hours,
          bannedType: this.bannedType,
          userIds: '',
          operationType: this.forbidType,
          reason: this.reason
        },
        rules: {
          userIds: [{ required: true, message: '不能为空' }],
          hours: [{ required: true, message: '不能为空' }],
          reason: [{ required: true, message: '不能为空' }],
          operationType: [{ required: true, message: '不能为空' }]
        }
      }
    },
    computed: {
      title() {
        const obj = {
          0: '封号',
          1: '解除封号',
          2: '禁聊',
          3: '解除禁聊',
          batch: '批量封号'
        }
        return obj[this.forbidType]
      },
      dialogVisible: {
        get() {
          return this.visible
        },
        set(val) {
          this.$emit('update:visible')
        }
      }
  },
    watch: {
      visible(val) {
        if (val) {
          this.formData.userIds = this.userIds
          this.formData.operationType = this.forbidType === 'batch' ? '2' : this.forbidType
        }
      }
    },
    methods: {
      onForbid() {
        this.$refs.forbidForm.validate(valid => {
          if (valid) {
            var send_data = this.DeepClone(this.formData)
            send_data.userIds = (send_data.userIds + '').split('\n').join(',')
            send_data.bannedType = (send_data.bannedType + '').split('\n').join(',')
            send_data['hours'] = parseInt(send_data.hours)
            send_data['days'] = Math.floor(send_data.hours / 24)
            console.log(this.formData)
            xhrForbidAccount(send_data).then(resp => {
              if (resp.message === 'ok') {
                this.dialogVisible = false
                this.$emit('onSuccess')
              }
            })
          }
        })
      },
      DeepClone(obj) {
        if (obj === null || typeof obj !== 'object') return obj;
        var cpObj = obj instanceof Array ? [] : {};
        for (var key in obj) cpObj[key] = this.DeepClone(obj[key]);
        return cpObj;
      },
      querySearch(queryString, cb) {
        var results = [
          { 'value': '诱导用户加入第三方平台' },
          { 'value': '发布垃圾广告' },
          { 'value': '视频聊天违规或内容低俗' },
          { 'value': '动态内容低俗或违法违规' },
          { 'value': '评论内容低俗或违法违规' },
          { 'value': '被其他用户举报' }
        ];
        cb(results);
      }
    }
  }

</script>
<style lang="scss" scoped>
.el-input--mini {
  width: 120px;
}
.el-checkbox-group{
  margin: 15px;
}
.el-autocomplete{
  display: inline;
}
</style>
